<!--
自带缓存功能的select, 防止频繁远程取值，过期时间: 2分钟
使用方法：
<select-option
    v-else-if="c.type=='select'"
    v-model="listQuery[c.property]"
    size="small"
    class="filter-item"
    :placeholder="c.label"
    :clearable=true
    :prop-name=c.property  // 必填, 枚举名称或属性名称
    :prop-ds-type=c.dataResource  // 1: enums (default), 2:sql动态取值
    prop-url="/core/coding/a2dept/select4column" // prop-type=2时， 必填
/>
-->

<template>
    <el-select
        v-model="val"
        :placeholder="placeholder"
        :size="size"
        :clearable=clearable
        :multiple="multiple"
        :multiple-limit="multipleLimit"
        :collapse-tags="collapseTags"
        :disabled="disabled"
        :name="name"
        :filterable="filterable">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
    </el-select>
</template>

<script>
    import {select4enums, select4column} from './api'
    import Cookies from 'js-cookie'

    export default {
        props: {
            propName: {
                type: String,
                default: 'Deleteflag'
            },
            propDsType: { // 1: enums, 2: sql取值
                type: Number,
                default: 1
            },
            propUrl: { // 2: sql取值时, url必填
                type: String,
                default: ''
            },
            value: {
                default: ''
            },
            size: {
                type: String,
                default: 'medium'
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            clearable: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            multipleLimit: {
                type: Number,
                default: 0
            },
            collapseTags: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            name: {
                type: String
            },
            filterable: {
                type: Boolean,
                default: false
            },
            cache: {
              type: Boolean,
              default: true
            }
        },
        data() {
            return {
                options: []
            }
        },
        computed: {
            val: {
                get() {
                    return this.value
                },
                set(id) {
                  const obj = this.options.filter(item=>item.id===id)[0];
                  console.log("val")
                  console.log(obj)
                  // console.log(obj.name)
                  this.$emit('input', obj.id)
                  this.$emit('handleMyNameCallback', obj.name)
                }
            }

        },
        mounted() {
            this.initSelectData()
        },
        methods: {

          myName(){

          },
            // 初始化多选项
            initSelectData() {
                const expires = 1/24/60 * 2; // 1 = 天
                let propNameTmp = this.propName
                if (this.propName.indexOf('.') !== -1){
                    propNameTmp = this.propName.split('.')[0]
                }
                if (this.propDsType == 1) {
                    // 枚举取值
                    if (this.cache) {
                      this.options = Cookies.getJSON('enum-'+propNameTmp)
                    }else{
                      this.options = undefined;
                    }
                    if (this.options === undefined){
                        select4enums(this.propUrl, {enumName: propNameTmp}).then(r => {
                            this.options = r.list
                            if (this.cache && !this.isNull(this.options) && this.options.length>0) {
                              Cookies.set('enum-' + propNameTmp, this.options, {
                                expires: expires
                              });
                            }
                        })
                    }
                } else if (this.propDsType == 2) {
                    // sql取值
                    if (this.cache) {
                      this.options = Cookies.getJSON(this.propUrl+'-'+propNameTmp)
                    }else{
                      this.options = undefined;
                    }
                    if (this.options === undefined) {
                        select4column(this.propUrl, propNameTmp).then(r => {
                            this.options = r.list
                            if (this.cache && !this.isNull(this.options) && this.options.length>0) {
                              Cookies.set(this.propUrl + '-' + propNameTmp, this.options, {
                                expires: expires
                              });
                            }
                        })
                    }
                }
            }
        }
    }
</script>
